<template>
    <div class="user-table-container">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span class="table-title">{{ title }}</span>
            <el-button type="primary" @click="getAllUsers">刷新数据</el-button>
          </div>
        </template>
        
        <el-table 
          :data="users" 
          style="width: 100%"
          stripe
          border
          highlight-current-row
        >
          <el-table-column prop="id" label="ID" width="80" align="center" />
          <el-table-column prop="username" label="用户名" align="center" />
          <el-table-column prop="power" label="权限" align="center" />
          <el-table-column prop="cardId" label="卡号" align="center" />
        </el-table>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from "vue"
  import axios from 'axios';
  import { ElMessage } from 'element-plus'
  
  const title = "用户列表"
  const users = ref([])
  
  const getAllUsers = async () => {
    try {
      const response = await axios.get("/api/user/selectAllUser")
      users.value = response.data.data
      ElMessage.success('数据加载成功')
    } catch (error) {
      console.error(error)
      ElMessage.error('获取用户列表失败')
    }
  }
  
  const handleEdit = (row) => {
    console.log('编辑用户:', row)
    // 这里可以添加编辑逻辑
  }
  
  onMounted(() => {
    getAllUsers()
  })
  </script>
  
  <style scoped>
  .user-table-container {
    font-family: 'Arial', sans-serif;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .table-title {
    font-size: 1.5rem;
    font-weight: bold;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  /* 保留原有的悬停效果 */
  .el-table__body tr:hover>td {
    background-color: #f5f5f5 !important;
  }
  
  /* 保留原有的斑马纹效果 */
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: #f9f9f9;
  }
  </style>